<template>
	<editor ref="myEditor" @init="editorInit" :value="value" :lang="language" :theme="theme" :options="options"></editor>
</template>
<script>
import Editor from 'vue2-ace-editor';
// 主题
import 'brace/theme/monokai';
import 'brace/theme/chrome';
// 支持的语言
import 'brace/snippets/javascript';
import 'brace/snippets/python';
import 'brace/snippets/json';
import 'brace/snippets/html';
// 代码语言提示
import 'brace/mode/javascript';
import 'brace/mode/python';
import 'brace/mode/json';
import 'brace/mode/html';
// 语言扩展
import 'brace/ext/language_tools';
import 'brace/ext/emmet';
import 'brace/ext/beautify';
import 'brace/ext/searchbox';
import 'brace/ext/chromevox';
import 'brace/ext/error_marker';
import 'brace/ext/keybinding_menu';
import 'brace/ext/linking';
import 'brace/ext/modelist';
import 'brace/ext/old_ie';
import 'brace/ext/settings_menu';
import 'brace/ext/spellcheck';
import 'brace/ext/split';
import 'brace/ext/static_highlight';
import 'brace/ext/statusbar';
import 'brace/ext/whitespace';
import 'brace/ext/textarea';
import 'brace/ext/themelist';
export default {
	components: {
		Editor
	},
	props: {
		theme: { type: String, default: 'monokai' },
		value: {
			type: String,
			default: ''
		},
		language: { type: String, default: 'json' },
		readOnly:false,
	},

	model: {
		prop: 'value',
		event: 'change'
	},
	computed:{
		options:function(){
			return {
				enableBasicAutocompletion: true, // 启用基本自动完成
				enableSnippets: true, // 启用代码段
				enableLiveAutocompletion: true, // 启用实时自动完成
				printMarginColumn: 30,
				displayIndentGuides: false, // 显示参考线
				enableEmmet: true, // 启用Emmet
				tabSize: 10, // 标签大小
				fontSize: 14, // 设置字号
				useWorker: true, // 使用辅助对象
				showPrintMargin: false, //去除编辑器里的竖线
				enableMultiselect: true, //     选中多处
				readOnly: this.readOnly, // 是否只读
				showFoldWidgets: true, // 显示折叠部件
				fadeFoldWidgets: true, // 淡入折叠部件
				wrap: true //换行
			}
		}
	},
	methods: {
		editorInit: function(editor) {
			// 窗口自适应
			editor.resize();
			// 监听编辑器变化
			editor.getSession().on('change', val => {
				// console.log('debug log --> ', editor.getValue());
				this.$emit('change', editor.getValue());
			});
		}
	}
};
</script>

<style scoped>
</style>
